<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .grid {
            margin: auto;
            width: 500px;
            text-align: center;
        }

        .grid table {
            width: 100%;
            border-collapse: collapse;
        }

        .grid th,
        td {
            padding: 10;
            border: 1px dashed orange;
            height: 35px;
            line-height: 35px;
        }

        .grid th {
            background-color: orange;
        }

        .titleBox {
            text-align: center;
            margin: 20px auto;
        }

        button {
            background-color: lightgreen;
        }
    </style>


</head>

<body>
    <div id="app">



        <div class="titleBox">
            <input type="text" placeholder="书名" v-model.trim='name'>
            <button @click='addBook'>点击添加</button>
            <button @click='changeBook'>点击编辑</button>
        </div>

        <div class="grid">
            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>名称</th>
                        <th>时间</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody>
                    <!-- 
                    {
                        id: 2,
                        name: '水浒传',
                        date: new Date()
                    }, -->
                    <tr v-for='(item,index) in  books' :key='item.id'>
                        <td>{{item.id}}</td>
                        <td>{{item.name}}</td>
                        <!-- <td>{{item.date| formDate}}</td> -->
                        <td>{{item.date| formDate('yyyy-dd-mm')}}</td>

                        <td>
                            <a href="#" @click.prevent='editBook(item.id)'>修改</a>
                            <span>|</span>
                            <a href="#" @click.prevent='delBook(item.id)'>删除</a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
    <script type="text/javascript" src="./vue.js"></script>
    <script type="text/javascript">
        /*
          图书管理-图书列表展示功能
          注意事项：<a href="" @click.prevent>修改</a>
          事件绑定时，可以只添加修饰符，而不绑定事件函数
        */


        //  - 静态列表效果
        // - 基于数据实现模板效果
        // - 处理每行的操作按钮



        // 定义一个全局的日期过滤器 
        Vue.filter('formDate', function (val, data1) {
            console.log(val);
            let y = val.getFullYear()
            let m = val.getMonth() + 1
            let days = val.getDate()
            let h = val.getHours()
            let mm = val.getMinutes()
            let ss = val.getSeconds()


            m = m < 10 ? '0' + m : m;
            days = days < 10 ? '0' + days : days;
            h = h < 10 ? '0' + h : h;
            mm = mm < 10 ? '0' + mm : mm;
            ss = ss < 10 ? '0' + ss : ss;
            if (data1 && data1.includes('yyyy-dd-mm')) {
                return `${y}- ${m}-${days}`

            } else {
                return `${y}- ${m}-${days} ${h}:${mm}:${ss}`
            }

        })

        let vm = new Vue({
            el: '#app',
            data: {
                // name:"浪潮之巅",
                name: "",
                editId: 0,

                books: [{
                    id: 1,
                    name: '三国演义',
                    date: new Date()
                }, {
                    id: 2,
                    name: '水浒传',
                    date: new Date()
                }, {
                    id: 3,
                    name: '红楼梦',
                    date: new Date()
                }, {
                    id: 4,
                    name: '西游记',
                    date: new Date()
                }]
            },
            methods: {
                //添加图书 
                addBook() {
                    let bookId = this.books[this.books.length - 1].id;
                    bookId++;
                    let booksObj = {
                        id: bookId,
                        name: this.name,
                        date: new Date()
                    }
                    console.log(booksObj);
                    this.books.push(booksObj)


                },
                //删除功能
                delBook(id) {
                    console.log(id);
                    // es6  第一种方法
                    // let currentIndex = this.books.findIndex(item => {
                    //     if (id == item.id) {
                    //         return true
                    //     }
                    // })

                    //   this.books.splice(currentIndex, 1)

                    //    let  currentIndex=this.books.findIndex(item=>item.id==id)
                    //    this.books.splice(currentIndex, 1)


                    // es6 第二种方法  filter 

                    //  let newArr= this.books.filter(item=>item.id!=id) 

                    //   this.books= newArr

                    this.books = this.books.filter(item => item.id != id)
                },

                //编辑图书 

                editBook(id) {
                    let currentIndex = this.books.findIndex(item => item.id == id)
                    this.name = this.books[currentIndex].name
                    this.editId = id;

                },
                changeBook() {
                    // 方法一

                    // this.books.forEach(item => {
                    //     if (item.id == this.editId) {
                    //         item.name = this.name
                    //     }
                    // })
                    // this.name = ''

                    //方法二
                    //    this.books=  this.books.map(item=>{
                    //         if(item.id==this.editId) {
                    //              item.name=this.name

                    //         }
                    //         return item
                    //     })
                    //     this.name=''

                    //  方法三
                    this.books = this.books.filter(item => {
                        if (item.id == this.editId) {
                            item.name = this.name
                        }
                        return item

                    })
                    this.name = ''


                }


            }
        })






    </script>
</body>

</html>